<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户注册页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js">
	
</script>
<script type="text/javascript">
  
  //检查两次密码是否相同
  function checkPassword(boo){
	  boo = $("#password").val()==$("#password1").val();
	  if(boo){
		  return;
	  }else{
		  alert("两次密码不一致，请重新输入！")
	  }
  }
 
  //检查输入的身份证号是否合格
  function checkIdcard(idcardLength){
	  idcardLength = $("#idcard").val();
	  if(idcardLength.length != 18 && idcardLength.length != 15){
		  alert("身份证号码输入有误，请重新输入！")
	  }else{
		  return true;
	  }
  }
  
  //价差输入的电话号码是否合格
  function checkPhone(phoneLength){
	 phoneLength = $("#phone").val();
		if(phoneLength.length != 11){
			alert("电话号码格式错误，请输入正确号码！")
		} else{
			return true;
		}		
  }
 
    		
	//创建客户
	function createCustomer() {
		var account = $("#account").val();
		var password = $("#password").val();
		var password1 = $("#password1").val();
		var idcard = $("#idcard").val();
		var phone = $("#phone").val();
		$.ajax({
					url : "${pageContext.request.contextPath }/createUser.do",
					type : "post",
					// data表示发送的数据
					data : JSON.stringify({
						account : account,
						password : password,
						idcard : idcard,
						phone : phone
					}),
					// 定义发送请求的数据格式为JSON字符串
					contentType : "application/json;charset=UTF-8",
					//定义回调响应的数据格式为JSON字符串,该属性可以省略
					dataType : "json",
					//成功响应的结果
					success : function(data) {
						if (data != null) {
							alert("您已注册成功，请返回登陆页面进行登陆!");
						}else{
							alert("尚未注册成功，请重新注册！")
						}
					}
				});
	}
</script>
</head>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	background-color: aliceblue;
}

.registerForm {
	width: 490px;
	padding: 20px;
	background: url(${pageContext.request.contextPath }/img/zhou.jpg) no-repeat;
	background-size: 100% 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	box-shadow: 10px 10px 50px #888888;
}

.wrap h1 {
	margin-top: 10px;
	margin-bottom: 110px;
	font-size: 40px;
	color: #ffffff;
}

.wrap input {
	display: block;
	text-align: center;
	width: 100%;
	height: 50px;
}

.txt {
	margin: 25px 0;
	background: rgba(255, 255, 255, .5);
	border-radius: 8px;
	transition: 0.8s;
	display: block;
}

.submit {
	cursor: pointer;
	font-size: 14px;
	background: steelblue;
	color: #fff;
	border-radius: 44px;
	transition: 1s;
	margin-bottom: 20px;
}

.wrap a {
	text-decoration: none;
	color: #fff;
	font-size: 12px;
	padding: 20px;
	transition: 1s;
	display: block;
}

.wrap a:hover {
	font-style: oblique;
	background-color: lightsteelblue;
}
</style>
<body>
	<form class="registerForm" id="registerForm">
		<div class="wrap">
			<h1>用户注册</h1>
			<input type="text" placeholder="账户" class="txt" id="account" name="account"/> 
			<input type="password" placeholder="密码" class="txt" id="password" name="password"/>
			<input type="password" placeholder="确认密码" class="txt" id="password1" name="password1" onblur="checkPassword(this)"/>  
			<input type="text" placeholder="请输入合法有效的身份证号" class="txt" id="idcard" name="idcard" onblur="checkIdcard(this)"/>
			<input type="text" placeholder="手机号码" class="txt" id="phone" id="phone" onblur="checkPhone(this)"/>
			<input type="submit" class="submit" value="确定注册" onclick="createCustomer()" />
			<a href="${pageContext.request.contextPath }/login.do">已经有账户了？立马去登陆！</a>
		</div>
	</form>

</body>
</html>